<template>
  <bui-page-layout ref="pageLayout" :is-z-paging="true">
    <view class="cardinfo-fail" v-if="gStore?.userInfo.partnerAuditStatus === 2">
      <image src="/static/image/icon-partner-fail.png" class="fail" />
      <text class="text">申请被驳回：{{errInfo}}！</text>
    </view>
    <view class="cardinfo-page">
      <u--form labelWidth="290rpx" labelPosition="top" :model="cardInfo" :rules="rules" ref="formInfo">
        <u-form-item label="是否有营业执照" prop="hasBusinessLicense">
          <div style="padding-top: 10px;">
            <u-switch v-model="cardInfo.hasBusinessLicense" activeColor="#fe9900" :activeValue="1" :inactiveValue="0" :disabled="partnerAuditStatus"></u-switch>
          </div>
        </u-form-item>
        <u-form-item label="是否自费开店" prop="isSelf">
          <div style="padding-top: 10px;">
            <u-switch v-model="cardInfo.isSelf" activeColor="#fe9900" :activeValue="1" :inactiveValue="0" :disabled="partnerAuditStatus"></u-switch>
          </div>
        </u-form-item>
        <template v-if="cardInfo.hasBusinessLicense === 1">
          <u-form-item :required="!partnerAuditStatus" label="公司名称" prop="companyName">
            <view class="input" :class="{disabled:partnerAuditStatus}">
              <u--input v-model="cardInfo.companyName" :disabled="partnerAuditStatus" placeholder="请输入" border="none"></u--input>
            </view>
          </u-form-item>
          <u-form-item :required="!partnerAuditStatus" label="统一社会信用代码" prop="creditCode">
            <view class="input" :class="{disabled:partnerAuditStatus}">
              <u--input v-model="cardInfo.creditCode" :disabled="partnerAuditStatus" placeholder="请输入" border="none"></u--input>
            </view>
          </u-form-item>
        </template>
        <u-form-item :required="!partnerAuditStatus" label="姓名" prop="contactName">
          <view class="input" :class="{disabled:partnerAuditStatus}">
            <u--input v-model="cardInfo.contactName" :disabled="partnerAuditStatus" placeholder="请输入" border="none"></u--input>
          </view>
        </u-form-item>
        <u-form-item :required="!partnerAuditStatus" label="身份证号" prop="idCardNo">
          <view class="input" :class="{disabled:partnerAuditStatus}">
            <u--input v-model="cardInfo.idCardNo" :disabled="partnerAuditStatus" placeholder="请输入" border="none"></u--input>
          </view>
        </u-form-item>
        <u-form-item :required="!partnerAuditStatus" label="联系电话" prop="contactMobile">
          <view class="input" :class="{disabled:partnerAuditStatus}">
            <u--input v-model="cardInfo.contactMobile" :disabled="partnerAuditStatus" maxLength="11" placeholder="请输入" border="none"></u--input>
          </view>
        </u-form-item>

      </u--form>
      <b-button :loading="buttonLoading" @change="submitInfo" style="margin:30rpx 30rpx 0" v-if="!partnerAuditStatus">
        <text class="button_t">{{ cardInfo.id ? '重新提交': '提交申请'}}</text>
      </b-button>
    </view>
  </bui-page-layout>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { globalStore } from "@/store";
const gStore = globalStore();
let buttonLoading = ref(false);
let errInfo = ref("");
let partnerAuditStatus = ref(null);
partnerAuditStatus = computed(() => {
  return (
    gStore.userInfo.partnerAuditStatus === 0 ||
    gStore.userInfo.partnerAuditStatus === 1
  );
});
var rules = reactive({
  companyName: {
    type: "string",
    required: true,
    message: "请填写公司名称",
    trigger: ["blur", "change"],
  },
  creditCode: {
    type: "string",
    required: true,
    message: "请填写统一信用代码",
    trigger: ["blur", "change"],
  },
  contactName: {
    type: "string",
    required: true,
    message: "请填写联系人",
    trigger: ["blur", "change"],
  },
  idCardNo: {
    type: "string",
    required: true,
    message: "请填写身份证号码",
    trigger: ["blur", "change"],
  },
  contactMobile: [
    {
      required: true,
      message: "请输入联系人手机号",
      trigger: ["change", "blur"],
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        return uni.$u.test.mobile(value);
      },
      message: "手机号码不正确",
      // 触发器可以同时用blur和change
      trigger: ["blur"],
    },
  ],
});
const formInfo = ref(null);
var cardInfo = ref({
  companyName: "",
  creditCode: "",
  contactName: "",
  contactMobile: "",
  idCardNo: "",
  hasBusinessLicense: 0,
  isSelf: 0,
  id: null,
});
const submitInfo = () => {
  formInfo.value
    .validate()
    .then((res) => {
      buttonLoading.value = true;
      savaWithdraw();
    })
    .catch((errors) => {
      buttonLoading.value = false;
    });
};
// 提交申请合伙人
const savaWithdraw = () => {
  uni.$request
    .service({
      url: "/m/partner/apply",
      method: "POST",
      data: cardInfo.value,
    })
    .then((res) => {
      buttonLoading.value = false;
      uni.$u.route({
        type: "redirectTo",
        url: "pages/partner-benefit/status",
        params: {},
      });
    })
    .catch((errr) => {
      buttonLoading.value = false;
    });
};
const getWithdraw = () => {
  uni.$request
    .service({
      url: "/m/partner/info",
      method: "POST",
      data: {},
    })
    .then((res) => {
      if (res) {
        cardInfo.value.id = res.id;
        cardInfo.value.companyName = res.companyName;
        cardInfo.value.contactMobile = res.contactMobile;
        cardInfo.value.creditCode = res.creditCode;
        cardInfo.value.contactName = res.contactName;
        cardInfo.value.idCardNo = res.idCardNo;
        cardInfo.value.hasBusinessLicense = res.hasBusinessLicense;
        cardInfo.value.isSelf = res.isSelf;
        errInfo.value = res.remark;
      }
    });
};
getWithdraw();
</script>
<style lang="scss">
page {
  background-color: #f6f6f8;
}
.cardinfo-fail {
  background-color: #ffe4e3;
  display: flex;
  align-items: center;
  padding: 20rpx 40rpx;
  .fail {
    width: 44rpx;
    height: 44rpx;
    margin-right: 16rpx;
  }
  .text {
    font-size: 28rpx;
    color: #232f3f;
  }
}
.cardinfo-page {
  padding: 0 40rpx;
  .input {
    flex: 1;
    padding: 20rpx 20rpx;
    background-color: #fff;
    border: 2rpx solid #d3dce6;
    border-radius: 16rpx;
  }
  .input.disabled {
    // border: 2rpx solid #f5f7fa;
    background-color: #f5f7fa;
  }
}
.submit {
  background-color: #fe9900;
  display: flex;
  justify-content: center;
  border-radius: 16rpx;
  padding: 22rpx 0;
  margin-top: 30rpx;
  .t {
    font-size: 32rpx;
    color: #fff;
  }
}
</style>
